<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <%@ include file="templates/header-css.jsp"%>

                <title>register</title>
        </head>

        <body class="gray-bg">


            <!--Header-->
            <div class="header-div" id="top">
                <div class="mid-header clearfix">
                    <a href="${pageContext.request.contextPath}" class="logo-font">Delicious</a>
                    <span class="header-right-box">

                        <a href="javascript:void(0);" class="header-link-box" data-toggle="modal" data-target="#SignInModal">
                            <button type="button">登录</button>
                        </a>
                    </span>
                </div>
            </div>


            <div class="mid-nav shadow-div">
                <div class="row list-row">
                    <div class="col-md-offset-2 col-md-8">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <form action="." method="post">
                                    <div class="form-group">
                                        <label class="control-label" for="usr">Nick name</label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span>
                                            <input type="text" class="form-control" id="usr" name="usr" placeholder="The name we call you" autofocus>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="tel">Telephone</label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span> </span>
                                            <input type="text" class="form-control" id="tel" name="tel" placeholder="Your telephone number">
                                        </div>
                                        <span class="error" id="tel_checker"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="pwd">Password</label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                            <input type="password" class="form-control" id="pwd" name="pwd" placeholder="Sign in password">
                                        </div>
                                        <span class="error" id="pwd_checker1"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="pwd2">Password Again</label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                            <input type="password" class="form-control" id="pwd2" name="pwd2" placeholder="confirm the password">
                                        </div>
                                        <span class="error" id="pwd_checker2"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="location">Location</label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-home"></span> </span>
                                            <input type="text" class="form-control" id="location" name="location" placeholder="Location of your merchant">
                                        </div>
                                    </div>


                                    <hr>
                                    <div id="reg_btns">
                                        <button type="button" class="btn btn-common btn-block">注册</button>
                                        <button type="button" class="btn btn-default btn-block">取消</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <a href="#top">
                <div class="top-box">
                    <span class="glyphicon glyphicon-chevron-up back-icon"></span>
                </div>
            </a>




            <!-- 登录模态框 -->
            <div class="modal fade" id="SignInModal" tabindex="-1" role="dialog" aria-labelledby="title">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header gold-bg">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="title">Sign in</h4>
                        </div>
                        <div class="modal-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel panel-default">
                                            <div class="panel-body">
                                                <form action="." method="post">
                                                    <div class="form-group">
                                                        <label for="usr">Username</label>
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span>
                                                            <input type="text" class="form-control" name="username" placeholder="Username" autofocus>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="pwd">Password</label>
                                                        <div class="input-group">
                                                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                                            <input type="password" class="form-control" name="password" placeholder="password">
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-common btn-block" type="button">注册</button>
                                <button class="btn btn-default btn-block" type="button" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer>

                <%@ include file="templates/footer.jsp"%>
                    <script type="text/javascript">
                        var v = new Validator();
                        $(document).ready(function () {
                            //登录模态框，由bootstrap的data-toggle实现


                            //登录
                            $('.modal-footer>button:first').click(function () {
                                $.post(
                                    'login', {
                                        username: $('[name=username]').val(),
                                        password: $('[name=password]').val()
                                    },
                                    function (data) {
                                        if (data.st === 1) {
                                            alert(data.msg);
                                            window.location = '${pageContext.request.contextPath}';
                                        } else if (data.st === -1) {
                                            alert(data.msg);
                                            //window.href = 'clientHome.html';
                                        } else {
                                            alert(data.msg);
                                        }
                                    }
                                );
                            });

                            //注册
                            $('#reg_btns>button:first').click(function () {
                                $.post(
                                    'regist', {
                                        cLocation: $('#location').val(),
                                        cPassword: $('#pwd').val(),
                                        cPersonName: $('#usr').val(),
                                        cTel: $('#tel').val()
                                    },
                                    function (data) {
                                        if (data.st === 1) {
                                            alert(data.msg);
                                            window.location = '${pageContext.request.contextPath}';
                                        } else if (data.st === -1) {
                                            alert(data.msg);
                                        } else {
                                            alert("unknown");
                                        }
                                    }
                                );
                            });

                            //cancel按钮
                            $('#reg_btns>button:last').click(function () {
                                window.location = '${pageContext.request.contextPath}';
                            });


                            //密码校验
                            $("#pwd").on("blur", function () {
                                v.isEmpty(this, "#pwd_checker1", "密码不能为空");
                            })

                            $("#pwd2").on("blur", function () {
                                v.isSame(this, "#pwd", "#pwd_checker2", "两次密码不一致");
                            });

                            //电话号码校验
                            $("#tel").on("blur", function () {
                                v.isTel(this, "#tel_checker");
                            });
                        });
                    </script>
            </footer>
        </body>

        </html>